<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <h2>vue学习之{{name}}</h2>
  <input type="text" placeholder="按下回车弹出输入内容" @keyup="showInfo1">

  <!--
  常用的键盘别名
  回车：enter
  删除：delete
  退出：esc
  空格：space
  换行：tab
  上：up
  下：down
  左：left
  右：right
  -->

  <input type="text" placeholder="按下删除弹出输入内容" @keyup.delete="showInfo2">
  <input type="text" placeholder="按下tab弹出输入内容,tab键必须与keydowm配合才有效，因为tab建抬起会失去焦点" @keydown.tab="showInfo2">


</div>

<script type="text/javascript">
  let showInfo1 = function (e) {
    //console.log('键盘编号',e.keyCode)
    if (e.keyCode == 13) {
      //回车键的编号为13
      console.log(e.target.value);
    }

  }

  let showInfo2 = function (e) {
    //console.log('键盘编号',e.keyCode)
   //无需判断，事件加了修饰符。vue帮我们判断
      console.log(e.target.value);


  }



  const vm = new Vue({
    el: '#root',
    data: {
      name: 'keyboard-event'
    },
    methods: {
      showInfo1,
      showInfo2
    }
  })

</script>

</body>
</html>
